<template>
<div>
    <div class="login_header">
    <a class="login_link" href="/" ><img src="../assets/退出.png" style="width:20px;height:20px"/></a>
    <a class="login_link" href="#" @click="SwitchStatus">{{SwitchText}}</a>
    </div>
    <div class="login_title">
        {{HeaderText}}
    </div>
    <div class="login_box" >
        <w_input :text2="Input1Text" type="text" ref="user"></w_input>
        <w_input :text2="Input2Text" type="password" v-show="Input2Show" ref="pwd"></w_input>
    </div>
    <div class="login_confirm">
       <w_button :text="ButtonText" size="max" type="primary" @click="isLogin"></w_button>
    </div>
    <div class="login_choice">
        <a class="login_link" href="#" ><img src="../assets/QQ.png" style="width:30px;height:30px"/></a>
        <a class="login_link" href="#" ><img src="../assets/微信.png" style="width:30px;height:30px"/></a>
        <a class="login_link" href="#" ><img src="../assets/新浪.png" style="width:30px;height:30px"/></a>
    </div>
</div>
</template>

<script>
import w_input from "@/components/w_input";
import w_button from "@/components/w_button";
import w_header from "@/components/w_header";
export default {
  name: "login",
  data() {
    return {
    };
  },
  props: {},
  computed: {
    SwitchText() {
      return this.$store.state.login.switch_text;
    },
    HeaderText() {
      return this.$store.state.login.header_text;
    },
    Input1Text() {
      return this.$store.state.login.input1_text;
    },
    Input2Text() {
      return this.$store.state.login.input2_text;
    },
    Input2Show() {
      return this.$store.state.login.input2_show;
    },
    ButtonText() {
      return this.$store.state.login.button_text;
    },
  },
  methods: {
    SwitchStatus() {
      this.$store.commit("switchstatus");
    },
    isLogin() {
        console.log("user"
        +this.$refs.user.$refs.input.value);
        console.log("pwd"+this.$refs.pwd.$refs.input.value);
        alert("登陆成功")
    }
  },
  components: {
    w_input,
    w_button,
    w_header
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login_header {
  display: flex;
  width: 100%;
  height: 40px;
  background-color: white;
  justify-content: space-between;
}
.login_title {
  text-align: center;
  padding: 20px 40px;
  font-size: 22px;
}
.login_box {
  padding: 0 20px;
}
.login_confirm {
  margin-top: 20px;
  padding: 0 20px;
  text-align: center;
}
.login_link {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  border: 0px solid #dcdfe6;
  color: black;
  background-color: white;
  cursor: pointer;
  text-decoration: none;
  order: 1;
}
.login_choice {
  margin-top: 140px;
  display: flex;
  padding: 0 50px;
  justify-content: space-between;
}
</style>
